<template>
    <div id="app">
        <div class="content">
            <div class="weizhi">您当前位置：<span @click="toIndex" style="cursor:pointer;">首页</span><span v-for="item in parentNames" @click="navigateToList(item.id)" style="cursor:pointer;"> ｜ {{item.name}}</span></div>
            <div class="content-tit">
                <h2>{{info.title}}</h2>
                <h3>来源： {{ info.belongName + ' - ' + info.departName }} 发布时间：{{ moment(info.createTime).format('YYYY-MM-DD') }} 浏览次数：{{ info.count }} </h3>
            </div>
            <div class="content-txt" v-html="info.content">
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
import '../../static/css/css.css';
import request from "@/utils/request";
import moment from "moment";

export default {
    name: '',
    components: {

    },
    data() {
        return {
            contentId: '',
            info: {},
            parentNames: []
        }
    },
    watch: {
        $route: {
            handler() {
                const currentContentId = this.$route.query.contentId
                this.find(currentContentId)
            },
            deep: true
        }
    },
    created() {
        const currentContentId = this.$route.query.contentId;
        this.find(currentContentId)
    },
    mounted() {
        const currentContentId = this.$route.query.contentId;
        this.find(currentContentId)
    },
    methods: {
        find(currentContentId){
            if (currentContentId != undefined && currentContentId != this.contentId) {
                this.contentId = currentContentId
                this.getContent()
                this.statistics(this.contentId)
            }
        },
        moment,
        toIndex() {
            this.$router.push({
                path: '/'
            })
        },
        getContent(){
            request({
                url: '/business/getContentInfo/' + this.contentId,
                method: 'get'
            }).then((res) => {
                this.info = res.data.data
                if ( this.info.type == 4 || this.info.type == 5 ) {
                    let contentList = JSON.parse(this.info.content).showList
                    let content = contentList.join("<br/><br/>")
                    this.info.content = content
                }
                this.getParentNames(this.info.categoryId)
            })
        },
        statistics(id) {
            // var handler = setInterval(function () {
                request({
                    url: '/business/addStatistics/' + id,
                    method: 'get'
                }).then((res) => {
                    console.log("添加统计信息成功")
                    // clearInterval(handler)
                })
            // }, 2 * 1000)
        },
        getParentNames(categoryId){
            request({
                url: '/business/parentNames/' + categoryId,
                method: 'get'
            }).then((res) => {
                this.parentNames = res.data.data.reverse()
                console.log(this.parentNames)
            })
        },
        navigateToList(id) {
            let newR = this.$router.resolve({
                path: '/list', query: {
                    categoryId: id
                }
            })
            window.open(newR.href,'_blank')
        },
    }
}
</script>

<style scoped>
/*详情页面*/
.content {
    padding: 20px;
}

.weizhi {
    font-size: 14px;
    line-height: 38px;
    border-bottom: 1px #CCCCCC dashed;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.content-tit h2 {
    text-align: center;
    color: #f50000;
    font-size: 22px;
    margin: 15px 0;
}

.content-tit h3 {
    text-align: center;
    font-weight: normal;
}

.content-txt {
    margin-top: 45px;
}

.content-txt p {
    line-height: 25px;
    padding: 0 20px;
    margin-top: 10px;
}

.pdf {
    width: 22px;
    float: left;
    margin-right: 10px;
}
</style>
